<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="MobileOptimized" content="240"/>
<meta name="format-detection" content="telephone=no" />
<title>{$eju.field.seo_title}</title>
<meta name="description" content="{$eju.field.seo_description}" />
<meta name="keywords" content="{$eju.field.seo_keywords}" />
<link href="{eju:global name='web_cmspath' /}/favicon.ico" rel="shortcut icon" type="image/x-icon" />
{eju:static file="skin/js/flexible.js" /}
{eju:static file="skin/css/my.css" /}
{eju:static file="skin/css/photoswipe.css" /}
{eju:static file="skin/css/swiper.min.4.css" /}
{eju:static file="skin/js/jquery.min.js" /}
{eju:static file="skin/js/swiper.min.4.js" /}
</head>
<body>
{eju:static file="skin/js/swiper-3.4.2.min.js" /}
<div class="nav_alert"></div>
<!--nav_alert end--> 
{eju:static file="skin/css/photo.css" /}
<header class="bot_menu">
  <div class="wraper">
    <div class="hLeft"> <a href="javascript:;"  onclick="history.back(-1)" class="ico_back backicon"></a> </div>
    <div class="hCenter"> <a href="javascript:void(0);"><span style="font-size: .40rem">{$eju.field.xinfang.title}</span></a> </div>
  </div>
</header>
<div class="swiper-container">
  <div class="swiper-wrapper">
    {eju:empty name="$eju['param']['photo_type']"}
      {eju:fanglist name="$eju.field.photo_list" table="xinfang_photo" id="vo"}
      <div class="swiper-slide"> <img data-src="{$vo.photo_pic}" class="swiper-lazy">
        <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
      </div>
      {/eju:fanglist}
    {eju:else /}
    {eju:sqlarclist map="[$eju['field']['aid'],0,$eju['param']['photo_type']]" mapkey="['aid','is_del','photo_type']" table="xinfang_photo" id="vo"}
    <div class="swiper-slide"> <img data-src="{$vo.photo_pic}" class="swiper-lazy">
      <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
    </div>
    {/eju:fanglist} 
    {/eju:empty}
  </div>
  <!-- 如果需要分页器 -->
  <div class="swiper-pagination"></div>
</div>
{eju:fanglist type="photo" id="field" group="photo_type"}
<input type="hidden" value="{$field.count}" id="pic{$key+1}">
{/eju:fanglist}
<div class="navbox">
  <ul>
    {eju:fanglist type="photo" id="field" group="photo_type"}
    <li {eju:eq name='$eju.param.photo_type' value='$field.photo_type'}class="active"{/eju:eq}>{$field.photo_type}({$field.count})</li>
    {/eju:fanglist}

  </ul>
</div>
<script>
    var picnum1=parseInt($('#pic1').val());
        picnum2=parseInt($('#pic2').val());
        picnum3=parseInt($('#pic3').val());
        picnum4=parseInt($('#pic4').val());
        picnum5=parseInt($('#pic5').val());
        picnum6=parseInt($('#pic6').val());
        if(picnum1==''){
            picnum1=0;
        }
        if(picnum2==''){
            picnum2=0;
        }
        if(picnum3==''){
            picnum3=0;
        }
        if(picnum4==''){
            picnum4=0;
        }
        if(picnum5==''){
            picnum5=0;
        }
        if(picnum6==''){
            picnum6=0;
        }
        picnum7=0;
    var mySwiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        preloadImages: true,
        lazyLoading: true,
        lazyLoadingInPrevNext: true,
        lazyLoadingInPrevNextAmount: 2,
        paginationType: 'fraction',
        onSlideChangeEnd: function (swiper) {                        
            if (mySwiper.activeIndex == 0) {
                 console.log(1);
                $('.navbox li').removeClass("active");
                $('.navbox li').eq(0).addClass("active");
            } else if (mySwiper.activeIndex == (picnum1- 1)) {                 
                $('.navbox li').removeClass("active");
                $('.navbox li').eq(0).addClass("active");
            } else if (mySwiper.activeIndex == (picnum1)) {                 
                $('.navbox li').removeClass("active");
                $('.navbox li').eq(1).addClass("active");
            } else if (mySwiper.activeIndex == (picnum1 + picnum2 - 1)) {                 
                $('.navbox li').removeClass("active");
                $('.navbox li').eq(1).addClass("active");
            } else if (mySwiper.activeIndex == (picnum1 + picnum2)) {                
                $('.navbox li').removeClass("active");
                $('.navbox li').eq(2).addClass("active");
            } else if (mySwiper.activeIndex == (picnum1 + picnum2 + picnum3 - 1)) {
                $('.navbox li').removeClass("active");
                $('.navbox li').eq(2).addClass("active");
            } else if (mySwiper.activeIndex == (picnum1 + picnum2 + picnum3)) {
                $('.navbox li').removeClass("active");
                $('.navbox li').eq(3).addClass("active");
            } else if (mySwiper.activeIndex == (picnum1 + picnum2 + picnum3 + picnum4 - 1)) {
                $('.navbox li').removeClass("active");
                $('.navbox li').eq(3).addClass("active");
            } else if (mySwiper.activeIndex == (picnum1 + picnum2 + picnum3 + picnum4)) {
                $('.navbox li').removeClass("active");
                $('.navbox li').eq(4).addClass("active");
            } else if (mySwiper.activeIndex == (picnum1 + picnum2 + picnum3 + picnum4 + picnum5 - 1)) {
                $('.navbox li').removeClass("active");
                $('.navbox li').eq(4).addClass("active");
            } else if (mySwiper.activeIndex == (picnum1 + picnum2 + picnum3 + picnum4 + picnum5)) {
                $('.navbox li').removeClass("active");
                $('.navbox li').eq(5).addClass("active");
            } else if (mySwiper.activeIndex == (picnum1 + picnum2 + picnum3 + picnum4 + picnum5 + picnum6 - 1)) {
                $('.navbox li').removeClass("active");
                $('.navbox li').eq(5).addClass("active");
            } else if (mySwiper.activeIndex == (picnum1 + picnum2 + picnum3 + picnum4 + picnum5 + picnum6 + picnum7)) {
                $('.navbox li').removeClass("active");
                $('.navbox li').eq(6).addClass("active");
            } else if (mySwiper.activeIndex == (picnum1 + picnum2 + picnum3 + picnum4 + picnum5 + picnum6 + picnum7 - 1)) {
                $('.navbox li').removeClass("active");
                $('.navbox li').eq(6).addClass("active");
            }
        }
    })
    $.each($('.navbox li'), function (index, b) {
        $(this).click(function () {
            console.log(picnum1);
            if ($(this).index() == 0) {
                mySwiper.slideTo(0, 200, false);//切换到第一个slide，速度为1秒
                $('.navbox li').removeClass("active");
                $('.navbox li').eq(0).addClass("active");
            } else if ($(this).index() == 1) {
                mySwiper.slideTo((picnum1), 200, false);//切换到第一个slide，速度为1秒
                $('.navbox li').removeClass("active");
                $('.navbox li').eq(1).addClass("active");
            } else if ($(this).index() == 2) {
                mySwiper.slideTo((picnum1 + picnum2), 200, false);//切换到第一个slide，速度为1秒
                $('.navbox li').removeClass("active");
                $('.navbox li').eq(2).addClass("active");
            } else if ($(this).index() == 3) {
                mySwiper.slideTo((picnum1 + picnum2 + picnum3), 200, false);//切换到第一个slide，速度为1秒
                $('.navbox li').removeClass("active");
                $('.navbox li').eq(3).addClass("active");
            } else if ($(this).index() == 4) {
                mySwiper.slideTo((picnum1 + picnum2 + picnum3 + picnum4), 200, false);//切换到第一个slide，速度为1秒
                $('.navbox li').removeClass("active");
                $('.navbox li').eq(4).addClass("active");
            } else if ($(this).index() == 5) {
                mySwiper.slideTo((picnum1 + picnum2 + picnum3 + picnum4 + picnum5), 200, false);//切换到第一个slide，速度为1秒
                $('.navbox li').removeClass("active");
                $('.navbox li').eq(5).addClass("active");
            } else if ($(this).index() == 6) {
                mySwiper.slideTo((picnum1 + picnum2 + picnum3 + picnum4 + picnum5 + picnum6), 200, false);//切换到第一个slide，速度为1秒
                $('.navbox li').removeClass("active");
                $('.navbox li').eq(6).addClass("active");
            }
            ;
        })
    })
    $('.swiper-container').css({'height': $(window).height()});
    var wh = $('.swiper-container').height();
    var ww = $('.swiper-container').width();
    $(".swiper-wrapper img").each(function () {
        $(this).load(function () {
            if ($(this).height() > $(this).width()) {
                $(this).height(wh - 100);
                $(this).css("top", "50px");
                $(this).css("left", (ww / 2 - $(this).width() / 2) + "px");
            } else {
                 var proportion = $(this).width() / $(this).height();   
                 var width = $(window).width();
                 var height = Math.round(width / proportion);

                $(this).css("top", (wh / 2 - height / 2) + "px");
            }
        });
    });
    var firstChild=$(".navbox ul li");
    firstChild.eq(0).addClass("active");
</script>
</body>
</html>
